<template>
  <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
    <tm-text color="primary" fontSize="24">{{
      $trans("pages.register.selectCurrency")
    }}</tm-text>
    <tm-row
      :column="3"
      class="py-n5 round-5 flex-row-center-between picker-container"
      @click="currencyDrawerShow = true"
    >
      <tm-col :span="2">
        <tm-row class="flex-start">
          <tm-image
            :round="100"
            :width="40"
            :height="40"
            :src="selectCurrencyItem.icon"
          ></tm-image>
          <tm-text class="ml-n5">{{ selectCurrencyItem.name }}</tm-text>
        </tm-row>
      </tm-col>
      <tm-col :span="1" class="text-align-right">
        <tm-icon class="text-size-xxs" name="arrow-down-s-line"></tm-icon>
      </tm-col>
    </tm-row>
  </tm-sheet>

  <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
    <tm-text color="primary" fontSize="24">{{
      $trans("pages.register.enterInvitationCode")
    }}</tm-text>
    <tm-input
      v-model="formData.email"
      :focusHighlight="false"
      :placeholder="$trans('pages.register.enterInvitationCodePlaceholder')"
      color="transparent"
      inputPadding="0"
      focusFontColor="#000001"
      cursorColor="#000001"
      class="text-weight-bold"
    ></tm-input>
  </tm-sheet>

  <tm-row class="mx-20 mt-n15" column="3">
    <tm-col :span="1">
      <tm-button skin="outlined" round="50" @click="onSkip">{{
        $trans("pages.register.skipButton")
      }}</tm-button>
    </tm-col>
    <tm-col :span="2">
      <tm-button round="50" block @click="onSignIn">{{
        $trans("pages.register.signUpButton")
      }}</tm-button>
    </tm-col>
  </tm-row>

  <CurrencyDrawer
    v-model:show="currencyDrawerShow"
    @choose="(item) => (selectCurrencyItem = item)"
  />
</template>

<script lang="ts" setup>
import CurrencyDrawer from "@/components/CurrencyDrawer/index.vue"
const formData = reactive({})
const selectCurrencyItem = ref({
  name: "USD",
  icon: "https://store.tmui.design/api_v2/public/random_picture",
})
const currencyDrawerShow = ref(false)

const onSkip = () => {
  uni.redirectTo({
    url: "/pages/login/index",
  })
}

const onSignIn = () => {
  uni.redirectTo({
    url: "/pages/login/index",
  })
}
</script>

<style lang="less"></style>
